<template>
  <div class="menu">
    <div class="logo">
      <div class="logoImg">
        <img :src="require('@/assets/logo.png')" />
      </div>
      <span>易拉罐</span>
    </div>
    <el-menu
      class="el-menu-vertical-demo"
      text-color="#001529"
      active-text-color="#3f7deb"
      router
      :default-active="activerouter"
    >
      <template v-for="(menu,index) in MenuList">
        <el-submenu
            v-if="menu.children && menu.children.length > 0"
            :key="index"
            :index="menu.index">
          <template slot="title">
            <i class="iconfont" :class="menu.icon"></i>
            <span class="menuName">{{menu.menuName}}</span>
          </template>
          <template v-if="menu.children">
            <el-menu-item
              v-for="(item,subidx) in menu.children"
              :key="subidx"
              :index="item.url"
            >{{item.menuName}}</el-menu-item>
          </template>
        </el-submenu>
        <el-menu-item
            :index="`${menu.url}`"
            v-else
            :key="index"
        >
          <i class="iconfont" :class="menu.icon"></i>
          <span class="menuName">{{menu.menuName}}</span>
        </el-menu-item>
      </template>
    </el-menu>
  </div>
</template>

<script lang="ts">
import {Component,Vue,Watch} from "vue-property-decorator";

@Component
export default class extends Vue{
  private activerouter = ""
  private MenuList = [
    {
      menuName: "下单",
      url: "/issueOrder",
      children: [],
      icon: ""
    },
    {
      menuName: "我的订单",
      url: "/myOrder",
      children: [

      ],
      icon: ""
    },
    {
      menuName: "我的地址",
      url: "/address",
      children: [

      ],
      icon: ""
    }
  ]
  @Watch("$route", { immediate: true })
  routechange(to: any, from: any) {
    this.activerouter = to.path;
  }
}
</script>
<style lang='scss' scoped>
.menu {
  position: fixed;
  top: 0;
  z-index: 10;
  height: 100vh;
  width: 220px;
  box-sizing: border-box;
  overflow-y: auto;
  color: #001529;
  background: #fff;
  .logo {
    width: 100%;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: space-around;
    padding: 0 50px 0 30px;
    box-sizing: border-box;
    border-bottom: 1px solid #dedede;
    .logoImg {
      width: 48px;
      height: 48px;
      img {
        width: 100%;
        height: 100%;
        border-radius: 50%;
      }
    }
    span {
      font-size: 18px;
      font-weight: 600;
    }
  }
  .el-menu {
    width: 100%;
    box-sizing: border-box;
    border: none;
  }
  .el-submenu__title {
    width: 220px;
  }
  .menuName {
    margin-left: 10px;
  }
}
</style>